<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.js'></script>
    <style>
        .red {
            color: red;
        }

        .colorBlue {
            color: blue;
        }
    </style>
</head>

<body>
    <div id='app'>
        <!-- 如果 class 已经存在，那么这里会将其合并 -->
        <h1 class="a" v-bind:class="classname">你好世界</h1>

        <!-- 通过对象进行类的绑定，绑定的时候对象的属性就是 class 的名称，如果值是 true
            那么就会被添加，如果值是 false 就不会被添加 
        -->
        <h1 :class="{red: true, aaa: false, bbb: true}">你好世界</h1>
        <h1 :class="classObj">我有 class</h1>
        <button @click="classObj.colorBlue = !classObj.colorBlue">修改</button>
        <!-- 通过数组进行 class 绑定 -->
        <h1 :class="classArr">我也有 class</h1>
        <hr>

        <h1 :style="styleStr">带颜色的 h1 标签字符串</h1>
        <h1 :style="styleObj">带颜色的 h1 标签对象</h1>
        <button @click="styleObj.color = '#6cf'">修改</button>
        <h1 :style="styleArr">带颜色的 h1 标签数组</h1>
    </div>
</body>
<script>
const app = {
        data() {
            return {
                classname: 'red',
                classObj: {
                    a: true,
                    b: false,
                    c: true,
                    colorBlue: false
                },
                classArr: ['colorBlue', 'a', 'b'],
                styleStr: 'color: red',
                styleObj: {
                    color: 'red',
                    border: '1px solid blue'
                },
                styleArr: [
                    'color: #f66',
                    'font-size: 50px'
                ]
            }
        },
        methods: {},
    }

    const vm = Vue.createApp(app).mount('#app')
</script>

</html>